<#assign module="errand"/>

<@override name="header">
<style>
	
	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote,button {
		padding:0;
		margin:0; 
	}
	.schedule-box {
		width:1000px;
		margin:0 auto;
		position:relative;
		font-family:"微软雅黑";
	}
	.sc-t1, .sc-t2, .sc-t3, .sc-t4, .sc-t5 {
	    margin: 0 auto;
	    overflow: hidden;
	    width: 1000px;
	    height:40px;
	    margin-top: 80px;
	    background-repeat: no-repeat;
	    background-image: url(${ctx}/assets/css/images/schedule_bg.png);
	}
	.sc-t1 {
		background-position:-9px -16px;
	}
	.sc-t2 {
		background-position:-9px -64px;
	}
	.sc-t3 {
		background-position:-9px -111px;
	}
	.sc-t4 {
		background-position:-9px -158px;
	}
	.sc-t5 {
		background-position:-9px -205px;
	}
	.schedule-box ul {
		top:-50px;
		position:absolute;
	}
	.sc-text1 {
		width:86px;
		height:46px;
		background:url(${ctx}/assets/css/images/sc-text1_03.png)  no-repeat;
	}
	.schedule-box ul {
		width:106%;
	}
	.schedule-box li:nth-child(5n) {
	    margin-right:0;
	}
	.schedule-box ul li {
		float:left;
		width:156px;
		color:#fff;
		margin-left:10px;
		line-height:36px;
		margin-right:57px;
		list-style-type:none;
	}
	.schedule-box li b {
		font-size:14px;
		width:86px;
		display:block;
		text-align:center;
		font-weight:normal;
	}
	.schedule-box li.l-Blue {
		background:url(${ctx}/assets/css/images/l-Blue_bg_03.png) no-repeat;
	}
	.sc-time { 
		width:102%;
	}
	.sc-time span:nth-child(5n) {
	    margin-right:0;
	}
	.sc-time span {
		color:#0094ff;
		float:left;
		width:180px;
		margin-top:8px;
		margin-left:-20px;
		margin-right:54px;
		text-align:center;
	}
	.points_click{
		padding: 7px 8px;
	}
</style>
</@override>
<@override name="body">

	<div class="row" id="realMap">
	
		<div class="col-md-12">
		    <ol class="breadcrumb">
		        <li><a href="${ctx}/errand/up/errandList">跑腿订单</a></li>
		        <li>当前单号： ${order.orderNo?if_exists}
		        <li><a href="javascript:;" onclick="window.history.go(-1);">返回</a> </li>
		    </ol>
		</div>
		
		<div class="col-md-12">
			<div class="schedule-box">
		    	<ul>
		            <li class="sc-text1 <#if order.status==0 || (cancel&&order.status==1)> l-Blue</#if>"><b>客户下单</b></li>
		            <li class="sc-text1 <#if order.status==2 || (cancel&&order.status==2)> l-Blue</#if>"><b>已接单</b></li>
		            <li class="sc-text1 <#if order.status==3 && treatment=false> l-Blue</#if>"><b>开始服务</b></li>
		            <li class="sc-text1 <#if order.status==3 && treatment> l-Blue</#if>"><b>已确认</b></li>
		            <li class="sc-text1 <#if order.status==4 > l-Blue</#if>"><b>已支付</b></li>
		        </ul>
		        <#if order.status==0 || (cancel&&order.status==1)>
		        	<div class="sc-t1"></div>
		        <#elseif order.status==2 || (cancel&&order.status==2)>
		        	<div class="sc-t2"></div>
		        <#elseif order.status==3 && treatment=false>
		        	<div class="sc-t3"></div>
		        <#elseif order.status==3 && treatment>
		        	<div class="sc-t4"></div>
		        <#elseif order.status==4>
		        	<div class="sc-t5"></div>
		        </#if>
		        <div class="sc-time">
					<#if createDate??>
	        			<span>${createDate?replace("-","/")}</span>
					</#if>
					<#if jiedanDate??>
	        			<span>${jiedanDate?replace("-","/")}</span>
					</#if>
					<#if runDate??>
	        			<span>${runDate?replace("-","/")}</span>
					</#if>
					<#if treatmentDate??>
	        			<span>${treatmentDate?replace("-","/")}</span>
					</#if>
					<#if finishDate??>
	        			<span>${finishDate?replace("-","/")}</span>
					</#if>
		        </div>
		    </div>
		</div>
		
		<div class="col-md-12 margin-top">
			<div class="tabbable">
			  <ul class="nav nav-tabs">
			    <li class="active"><a href="#tab1" data-toggle="tab">订单跟踪</a></li>
			    <li><a id="tab2click" href="#tab2" data-toggle="tab">订单轨迹</a></li>
			  </ul>
			  <div class="tab-content">
		      	<div class="tab-pane active" id="tab1">
					<div class="row">
						<div class="col-xs-12">
							<div class="panel panel-default">
					        	<div>
									<table class="table table-hover table-striped">
										<thead>
										<tr style="font-size:14px;">
											<th>时间</th>
											<th>跟踪信息</th>
										</tr>
										</thead>
										<tbody>
										<#list order.statusList as status>
											<tr>
												<td><span style="color: #606060;">${status.created?string('MM月dd HH:mm:ss')}</span></td>
												<td>
					                            	<span style="color:#0094ff;">${status.memo?if_exists}</span>
												</td>
											</tr>
										</#list>
										</tbody>
									</table>
					        	</div>
				        	</div>
			        	</div>
					</div>
					<div class="row">
						<div class="col-xs-6">
							<div class="panel panel-default">
					        	<div class="panel-heading">
					        		订单信息
					        	</div>
						        <ul class="list-group">
						        	<li class="list-group-item">下单时间: &nbsp;&nbsp;  ${order.created?string('MM/dd HH:mm')}</li>
				                 	<#if img1?? ||img2?? || img3?? || img4?? || img5?? >
				                 	<li class="list-group-item" style="100px;width:auto;">
											<div  style="height:auto;width:auto;">
												图片描述:
										    </div>
								    </li>
				                 	<li class="list-group-item" >
								    		<div  style="margin-left:-2px;height:100px;width:100%;" >
						    				<#if img1??>
						    					<div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img src="${ctx}/${img1}" data-img="${ctx}/${maximg1}" width="100%"  height="100%"/>
												</div>
											</#if>
											<#if img2??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${img2}" data-img="${ctx}/${maximg2}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if img3??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img src="${ctx}/${img3}" data-img="${ctx}/${maximg3}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if img4??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${img4}" data-img="${ctx}/${maximg4}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if img5??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${img5}" data-img="${ctx}/${maximg5}" width="100%" height="100%"/>
												</div>
											</#if>
									    	</div>
				                 	</li>
				                 	</#if>
				                 	<#if confirmImg0?? ||confirmImg1?? || confirmImg2?? || confirmImg3?? || confirmImg4?? || confirmImg5?? || confirmImg6?? || confirmImg7?? || confirmImg8?? || confirmImg9??>
				                 	<li class="list-group-item" style="100px;width:auto;">
											<div  style="height:auto;width:auto;">
												司机确认费用备注图片描述:
										    </div>
								    </li>
				                 	<li class="list-group-item" >
								    		<div  style="margin-left:-2px;height:100px;width:100%;" >
						    				<#if confirmImg0??>
						    					<div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img src="${ctx}/${confirmImg0}" data-img="${ctx}/${confirmImg0}" width="100%"  height="100%"/>
												</div>
											</#if>
											<#if confirmImg1??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg1}" data-img="${ctx}/${confirmImg1}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg2??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img src="${ctx}/${confirmImg2}" data-img="${ctx}/${confirmImg2}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg3??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg3}" data-img="${ctx}/${confirmImg3}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg4??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg4}" data-img="${ctx}/${confirmImg4}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg5??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg5}" data-img="${ctx}/${confirmImg5}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg6??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg6}" data-img="${ctx}/${confirmImg6}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg7??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg7}" data-img="${ctx}/${confirmImg7}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg8??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg8}" data-img="${ctx}/${confirmImg8}" width="100%" height="100%"/>
												</div>
											</#if>
											<#if confirmImg9??>
								    		    <div class="col-md-2" style="height:100px;width:19%; padding:0px 0px;margin:0px 0.5%;">
													<img  src="${ctx}/${confirmImg9}" data-img="${ctx}/${confirmImg9}" width="100%" height="100%"/>
												</div>
											</#if>
									    	</div>
				                 	</li>
				                 	</#if>
				                 	<li class="list-group-item">任务类型: &nbsp;&nbsp;
				                 			${order.orderType?if_exists}
				                 	</li>
				                 	<li class="list-group-item">订单来源: &nbsp;&nbsp;  ${order.channelName?if_exists}</li>
				                    <li class="list-group-item">客户姓名: &nbsp;&nbsp;  ${order.passengerName?if_exists}</li>
				                    <li class="list-group-item">客户手机: &nbsp;&nbsp;  ${order.passengerPhone?if_exists}</li>
				                    <li class="list-group-item">任务起点: &nbsp;&nbsp;  ${order.startAddress?if_exists}</li>
			                    	<li class="list-group-item">任务终点: &nbsp;&nbsp;  ${order.deliverAddress?if_exists}</li>
				                    <li class="list-group-item">详细起点: &nbsp;&nbsp;  ${order.startDetailed?if_exists}</li>
			                    	<li class="list-group-item">详细终点: &nbsp;&nbsp;  ${order.endDetailed?if_exists}</li>
			                    	<li class="list-group-item">发件人电话: &nbsp;&nbsp;  ${order.recipients?if_exists}</li>
			                    	<li class="list-group-item">收件人电话: &nbsp;&nbsp;  ${order.phone?if_exists}</li>
			                    	<li class="list-group-item">购买需求: &nbsp;&nbsp;  ${order.buyNeeds?if_exists}</li>
			                    	<li class="list-group-item">重量: &nbsp;&nbsp;  ${order.weight?if_exists}</li>
			                    	<li class="list-group-item">商品金额: &nbsp;&nbsp;  ${order.goodsCash?if_exists}</li>
			                    	<li class="list-group-item">感谢费: &nbsp;&nbsp;  ${order.thanksCash?if_exists}</li>
			                    	<li class="list-group-item">重量费: &nbsp;&nbsp;  ${order.weightPrice?if_exists}</li>
			                    	<li class="list-group-item">保价金额: &nbsp;&nbsp;  ${order.protectPrice?if_exists}</li>
			                    	<li class="list-group-item">附加服务: &nbsp;&nbsp;  ${addServives}</li>
			                    	<li class="list-group-item">热门标签: &nbsp;&nbsp;</li>
			                    	<li class="list-group-item" >
				                    	<div id="tips" style="margin-left:-2px;height:100px;width:100%;" >
					                    	
				                    	</div>
			                    	</li>
			                    	<li class="list-group-item">备注: &nbsp;&nbsp;  ${order.content?if_exists}</li>
				                    <li class="list-group-item">预约时间: &nbsp;&nbsp; <#if order.startTime??>${order.startTime?string('MM/dd HH:mm')}<#else>${order.created?string('MM/dd HH:mm')}</#if> </li>
			                   		<li class="list-group-item">所属公司: &nbsp;&nbsp;  ${order.companyName?if_exists}</li>
				                    <#if (order.status>0)>
				                    <li class="list-group-item">员工姓名: &nbsp;&nbsp;  ${order.employName?if_exists}</li>
				                    <li class="list-group-item">员工电话: &nbsp;&nbsp;  ${order.employPhone?if_exists}</li>
				                    </#if>
				                    <li class="list-group-item">
				                    	当前状态: &nbsp;&nbsp; 
				                    	<#if order.cancelCause??>
											已销单
										<#elseif order.status==0>
											未派单
										<#elseif order.status==1>
											已派单
										<#elseif order.status==2>
											已接单
										<#elseif order.status==3>
											执行中
										<#elseif order.status==4>
											已完成
										<#if order.review>已评价<#else>未评价</#if>
										</#if>
										<#if order.status==0&&!order.cancelCause??>
											<@shiro.hasPermission name='paidan'>
											&nbsp;&nbsp;<a href="#" class="errand_paidan" orderId="${order.id}" orderNo="${order.orderNo}" 
											  orderTypeId="${order.orderTypeId}"
											  startLng="${order.startLng!0}" startLat="${order.startLat!0}" passengerName="${order.passengerName}"
											  passengerPhone="${order.passengerPhone}" fromPlace="${order.startAddress}">立即派单</a>
											</@shiro.hasPermission>
										</#if>
				                    </li>
				                    <#if order.cancelCause??>
				                    <li class="list-group-item">销单原因: &nbsp;&nbsp;  ${order.cancelCause?if_exists}</li>
									</#if>
				                    <#if order.orderReview??>
				                    <li class="list-group-item">评价分数:&nbsp;&nbsp; ${order.orderReview.score?if_exists}分</li>
				                    <li class="list-group-item">评价内容:&nbsp;&nbsp; ${order.orderReview.content?if_exists}</li>
									</#if>
		                     		<li class="list-group-item">任务内容:</br>${order.content?if_exists}</li>
				                    <li class="list-group-item">订单备注:</br>
										<#list order.memoList as memo>
										  &emsp;${memo_index+1}:
						        		  &emsp;${memo.memo?if_exists}</br>
										</#list>
				                    </li>
				                    <li class="list-group-item">服务人员备注: &nbsp;&nbsp;  ${order.employMemo?if_exists}</li>
								</ul>
					        </div>
					        	
						</div>
						<div class="col-xs-6">
							<div class="panel panel-default">
					        	<div class="panel-heading">
					        		付款信息
					        	</div>
					        	<ul class="list-group">
					        		<#if order.status==4>
					                    <li class="list-group-item">等待时间:&nbsp;&nbsp; ${order.waitedTime!0.0}分钟</li>
					                    <li class="list-group-item">执行时间:&nbsp;&nbsp; ${order.travelTime!0.0}分钟</li>
					                    <li class="list-group-item">执行里程:&nbsp;&nbsp; ${order.mileage!0.0}公里</li>
					                    <li class="list-group-item">起步费用:&nbsp;&nbsp; <font color="red">￥${order.startPrice!0.0}</font>元</li>
					                    <li class="list-group-item">里程费用:&nbsp;&nbsp; <font color="red">￥${order.mileagePrice!0.0}</font>元</li>
					                    <li class="list-group-item">等候费用:&nbsp;&nbsp; <font color="red">￥${order.waitPrice!0.0}</font>元</li>
					                    <li class="list-group-item">时间费用:&nbsp;&nbsp; <font color="red">￥${order.travelTimePrice!0.0}</font>元</li>
					                    <li class="list-group-item">重量费用:&nbsp;&nbsp; <font color="red">￥${order.weightPrice!0.0}</font>元</li>
					                    <li class="list-group-item">预算金额:&nbsp;&nbsp; <font color="red">￥${order.shouldPay!0.0}</font>元</li>
					                    <#if order.goodsCash gt 0>
					                    <li class="list-group-item">商品费用:&nbsp;&nbsp; <font color="red">￥${order.goodsCash}</font>元</li>
					                    </#if>
					                    <#if order.thanksCash gt 0>
					                    <li class="list-group-item">感谢费用:&nbsp;&nbsp; <font color="red">￥${order.thanksCash}</font>元</li>
					                    </#if>
			                    		<li class="list-group-item">保价金额:&nbsp;&nbsp; <font color="red">￥ ${order.protectPrice!0.0?if_exists}</font>元</li>
					                    <li class="list-group-item">加价金额:
				                    		<font color="red">
				                        		￥<span>${order.guoluMoney+order.yuanchengMoney+order.otherMoney}</span>
				                        	</font>
				                        	(过路费：${order.guoluMoney!0.0}，远程费：${order.yuanchengMoney!0.0}，其他费：${order.otherMoney!0.0})
					                    </li>
					                    <@tiaojia>
					                    <li class="list-group-item">
				                        	 服务人员调价：
				                        	(公里：${order.justKilometres!"-"}，费用：${order.justMoney!"-"})
				                        </li>
				                        </@tiaojia>
					                    <li class="list-group-item">实收金额:&nbsp;&nbsp; <font color="red">￥${order.realPay!0.0}</font>元
					                    	<@shiro.hasPermission name='modifycash'>
					                        	<button id="modifyCash" class="btn btn-default btn-xs">修改</button>
				                        	</@shiro.hasPermission>
			                        	</li>
					                    <li class="list-group-item">付款方式:&nbsp;&nbsp;
					                    	<#if order.preAndAfterPayType??>
				                        		${order.preAndAfterPayType}(${order.preAndAfterPayMoney?if_exists})
				                        	</#if>
					                    </li>
			                    	  <#else>
							        	<li class="list-group-item">订单尚未完成，暂无付款信息。</li>
				                    </#if>
								</ul>
					        </div>
						</div>
					</div>
			    </div>


				<div class="tab-pane" id="tab2">
	    			<div class="row">
						<div class="col-xs-12 margin-top">
						
							<div class="col-xs-12">
								<div class="col-md-1" style="width:120px;">行驶中的轨迹:</div><div class="col-md-5" style="width:80px;height:5px;margin-top:9px;background-color:red;"></div><span class="col-md-1" id="run_distance_span"></span>
								<div class="col-md-1" style="width:120px;">等待中的轨迹:</div><div class="col-md-5" style="width:80px;height:5px;margin-top:9px;background-color:#ff8a18;"></div><span class="col-md-1" id="wait_distance_span"></span>
							</div>
						
							<div class="col-xs-10 margin-top" style="width:80%">
								<div class="panel panel-default">
					        		<div class="panel-heading">
						        		订单轨迹
						        		<input type="button" id="playcar" disabled="disabled" onclick="play()" class="button button-pill button-flat-blue button-tiny" value="开始回放" style="display:none;"/>
										<input type="button" id="resetcar" disabled="disabled" onclick="reset()" class="button button-pill button-flat button-tiny" value="重置" style="display:none;" />
										<input type="button" id="distancetool" onclick="distance()" class="button button-pill button-flat-action button-tiny" value="测距" style="display:none;" />
					        		</div>
						        	<#if order.treatment>
							            <div id="rightmap" style="z-index: 99999; height:500px;">
		        						</div>
	        						<#else>
	        							<div class="panel-body">
	        								暂无订单轨迹
		        						</div>
	        						</#if>
					       		</div>
				       		</div>
				       		<div class="col-xs-2" style="width:20%">
				       			<div class="panel panel-default">
						        	<#if order.treatment>
		        						<div id="points_div" style="overflow-y:auto;max-height:530px;">
							             	
							            </div>
						            <#else>	
						            	<div class="panel-body">
							             	暂无轨迹详情
							            </div>
						            </#if>
					        	</div>
							</div>
						</div>
					 </div>
		    	</div>
			    	
			  </div>
			</div>
		</div>
	</div>
	
	
	<div class="modal fade" id="dialog_modifyCash">
		<div class="modal-dialog" style="margin-left:8%;margin-top:2%;">
		   <div class="modal-content" style="width:90%;height:90%;">
		    	<div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        </div>
			    <div class="modal-body">
			      	<div>
			      		 <img id="imgurl" style="width:100%;height:100%;"/>
					</div>
		     	</div>
		 	</div>
		</div>
	</div>
		
<!--修改订单金额-->
<#if order.status==4>
	<div class="form-horizontal">
	<div class="modal fade" id="dialog_updateRealMoney">
	  <div class="modal-dialog" style="width:800px;">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title">修改订单金额</h4>
	      </div>
	      <div class="modal-body">
	      	<form id="modify_form">
	      		<input type="hidden" name="id" value="${order.id}" />
		      	<div class="form-group">
		      		<label class="col-sm-2 control-label">修改后金额：</label>
		      		<#if order.preAndAfterPayType??>
						<#if order.preAndAfterPayType?index_of("优惠券")!=-1>
							<div class="col-sm-3">
								<div class="input-group">
	 	 							<div class="input-group-addon">优惠券</div>
			                		<input class="form-control" type="number" id="couponMoney" name="couponMoney" min="0" value="${order.couponMoney?if_exists}" required />
			                	</div>
			                </div>
			            </#if>
						<#if order.preAndAfterPayType?index_of("代付")!=-1>
							<div class="col-sm-3">
								<div class="input-group">
	 	 							<div class="input-group-addon">代付</div>
			                		<input class="form-control" type="number" id="cashMoney" name="cashMoney" min="0" value="${order.cashMoney?if_exists}" required />
			                	</div>
			                </div>
			            </#if>
						<#if order.preAndAfterPayType?index_of("签单")!=-1>
			                <div class="col-sm-3">
			                	<div class="input-group">
	 	 							<div class="input-group-addon">签单</div>
			                		<input class="form-control" type="number" id="signMoney" name="signMoney" min="0" value="${order.signMoney?if_exists}" required />
			                	</div>
			                </div>
			            </#if>
						<#if order.preAndAfterPayType?index_of("余额")!=-1>
							<div class="col-sm-3">
			                	<div class="input-group">
	 	 							<div class="input-group-addon">余额</div>
			                		<input class="form-control" type="number" id="balanceMoney" name="balanceMoney" min="0" value="${order.balanceMoney?if_exists}" required />
			                	</div>
			                </div>
			            </#if>
			            <#if order.preAndAfterPayType?index_of("支付宝")!=-1>
							<div class="col-sm-3">
			                	<div class="input-group">
	 	 							<div class="input-group-addon">支付宝</div>
			                		<input class="form-control" type="number" id="alipayMoney" name="alipayMoney" min="0" value="${order.alipayMoney?if_exists}" required />
			                	</div>
			                </div>
			            </#if>
			            <#if order.preAndAfterPayType?index_of("微信")!=-1>
							<div class="col-sm-3">
			                	<div class="input-group">
	 	 							<div class="input-group-addon">微信</div>
			                		<input class="form-control" type="number" id="weixinMoney" name="weixinMoney" min="0" value="${order.weixinMoney?if_exists}" required />
			                	</div>
			                </div>
			            </#if>
		            </#if>
	                
	                <label class="col-sm-2 control-label">原金额：${order.realPay?if_exists}</label>
	                
		        </div>
		      	<div class="form-group">
		      		<label class="col-sm-2 control-label">修改原因：</label>
	                <div class="col-sm-8">
	                	<textarea class="form-control" cols="20" id="dialog_modifyCash_content" name="content" rows="2" required></textarea>
	                </div>
		        </div>
		        <hr/>
		        <h5 class="modal-title">填写该订单所对应服务人员和客户的余额变动，<font color="red">点击"+"或"-"使余额增加或减少</font></h5>
		        
		        <div class="form-group" style="margin-top:20px;">
		      		<label class="col-sm-3 control-label">服务人员余额：</label>
	                <div class="col-sm-5 input-group">
	                	<span class="input-group-btn"><button id="driver_virtual_plusminus" type="button" class="btn btn-default" title="'+'为增加余额，'-'为减少余额"><span class="glyphicon glyphicon-plus"></span></button></span>
	                	<input type="hidden" id="driverPlusMinus" name="driverPlusMinus" value="0">
	                	<input class="form-control" id="driverMoney" name="driverMoney" type="number" min="0" value="0" required placeholder="+为增加余额，-为减少余额"/>
	                </div>
		        </div>
		        
		        <div class="form-group">
		      		<label class="col-sm-3 control-label">客户余额：</label>
	                <div class="col-sm-5 input-group">
	                	<span class="input-group-btn"><button id="member_virtual_plusminus" type="button" class="btn btn-default" title="'+'为增加余额，'-'为减少余额"><span class="glyphicon glyphicon-plus"></span></button></span>
	                	<input type="hidden" id="memberPlusMinus" name="memberPlusMinus" value="0">
	                	<input class="form-control" id="memberMoney" name="memberMoney" type="number" min="0" value="0" required placeholder="+为增加余额，-为减少余额"/>
	                </div>
		        </div>
		        
		        <div class="form-group">
		      		<label class="col-sm-3 control-label">公司：</label>
	                <div class="col-sm-5 input-group">
	                	<p class="form-control-static" id="companyMoney"></p>
	                </div>
		        </div>
		  	</form>
	      </div>
	      <div class="modal-footer">
	    	<button type="button" class="btn btn-primary" id="ok_modal_updateRealMoney">提交</button>
	    	<button type="button" class="btn btn-default" id="close_modal_updateRealMoney">关闭</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div>
	</div>
</#if>
	
<!--派单-->
<div id="dialog_paidan" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-conten">
     	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    	<div>
	    <ul class="modal-paid">
	    	<input type="hidden" id="paidanOrderId" />
	    	<input type="hidden" id="paidanOrderLng" />
	    	<input type="hidden" id="paidanOrderLat" />
	     	<li class="modal-dtu hidden-xs">
	     		<div id="allmap" style="height:100%;width:100%;">
	     		</div>
	     	</li>
	     	<li class="modal-lbiao">
	     		<div class="modal-kehu">
	     			<p>客户姓名：<span id="paidanClientName"></span></p>
	     			<p>客户电话：<span id="paidanClientPhone"></span></p>
	     			<p>预约地址：<span id="paidanFromPlace"></span></p>
	     		</div>
	     		<div class="modal-sos">
	     			<div  class="row">
	     				<div class="col-xs-5">
	     					<span style="line-height: 2.3;"><b>推荐服务人员</b></span>
	     				</div>
	     				<div class="col-xs-7">
	     					<select id="distance" style="width:163px;height:30px;padding:0;margin-right:3px;" class="form-control">
								<option value="5" selected="selected">5公里范围内查找</option>
								<option value="10">10公里范围内查找</option>
								<option value="15">15公里范围内查找</option>
								<option value="20">20公里范围内查找</option>
							</select>
						</div>
					</div>
	     		</div>
	     		<div class="modal-sj" id="paidanDrivers">
	     		</div>
	     	</li>
	    </ul>
	  	</div>   
    </div>
  </div>
</div>
</@override>
<@override name="footer">
<script src="//api.map.baidu.com/api?v=2.0&ak=AuNk3YS21DSmHEEvIFDf9dbD" type="text/javascript"></script> 
<script src="//api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js" type="text/javascript"></script>
<script src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js" type="text/javascript"></script>
<script src="${ctx}/assets/js/RichMarker_min.js" type="text/javascript"></script>
<script type="text/javascript">

<#if tips??>
<#list tips as tip>
	var html= "<div class='col-md-2' style='height:40px;width:40px;margin-left:4px;margin-right:4px;margin-top:5px;float:left;'>"
			     + "<img src='${ctx}${tip}' data-img='${ctx}${tip}' width='40px;'  height='40px;'/></div>";


	$("#tips").append(html);

</#list>
</#if>

<#if order.treatment>
	var rightmap = null; //地图对象
	var point_marker=null;
	var points=[];
	var firstpoint=null;
	var lastpoint=null;
	var vectorMarker=null;
	var isfirst=true;
	
	var orderTypeId;
	
	var timer;     //定时器
	var index = 0; //记录播放到第几个point
	
	function initialize(){
	
		if(isfirst){
			
			$.post('${ctx}/errand/pointDetails',{'id':${order.id}},function(data){
	            
	            if(data.success){
	               if(null!=data.firstLng && null!=data.firstLat){
	               
	               		$("#run_distance_span").html(data.runDistance+"公里");
	               		$("#wait_distance_span").html(data.waitDistance+"公里");
	               		
						firstpoint=new BMap.Point(data.firstLng, data.firstLat);
	               
		                rightmap = new BMap.Map("rightmap");  
						rightmap.centerAndZoom(firstpoint, 12);
					    rightmap.enableScrollWheelZoom();
					    
					    var pointmap=data.orderLocations;
			               		
	               		var pointsDiv="";
	               		
	               		pointsDiv+="<div class='list-group' style='margin-bottom: 0px;'>";
	               		pointsDiv+="<a href='JavaScript:;' class='list-group-item'>定位时间<div style='float:right'>类型</div></a>";
	               		pointsDiv+="<a href='JavaScript:;' class='list-group-item' style='text-align:center;'>（类型为GPS才准确）</a>";
	               		var lastLng=null;
           				var lastlat=null;
	               		$(pointmap).each(function(index,element){
	               			points.push(new BMap.Point(element.longitude, element.latitude));
	               			pointsDiv+="<a href='JavaScript:;' class='list-group-item points_click' data-lng='"+element.longitude+"' data-lat='"+element.latitude+"' data-locDate='"+element.locDateSecondsStr+"' data-locType='"+element.locTypeStr+"' data-radius='"+element.radius+"'>"+element.locDateSecondsStr+"<div style='float:right'>"+element.locTypeStr+"</div></a>";
	               			var thisLng=element.longitude;
               				var thislat=element.latitude;
               				if(null!=thisLng && null!=thislat && null!=lastLng && null!=lastlat){
               					var thisPoints=[];
               					thisPoints.push(new BMap.Point(thisLng, thislat));
               					thisPoints.push(new BMap.Point(lastLng, lastlat));
               					if(element.run==1){
               						rightmap.addOverlay(new BMap.Polyline(thisPoints, {strokeColor: "red", strokeWeight: 8, strokeOpacity: 1}));
               					}
               					else{
               						rightmap.addOverlay(new BMap.Polyline(thisPoints, {strokeColor: "#ff8a18", strokeWeight: 8, strokeOpacity: 0.8}));
               					}
               				}
	               			lastLng=thisLng;
	               			lastlat=thislat;
	               		});
	               		pointsDiv+="</div>";
	               		
	               		$("#points_div").html(pointsDiv);
				        
				        //rightmap.addOverlay(new BMap.Polyline(points, {strokeColor: "blue", strokeWeight: 5, strokeOpacity: 1}));
				
						//显示小车子
						car = new BMap.Marker(points[0]);
						rightmap.addOverlay(car);
						
						$("#playcar").show();
						$("#resetcar").show();
						$("#distancetool").show();
						$("#playcar").attr("disabled",false);
						$("#resetcar").attr("disabled",false);
	               }
	               else{
	               		$.scojs_message("暂无任何轨迹点", $.scojs_message.TYPE_ERROR);
	               }
	            } else {
	                $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
	            }
		    },'json');
		    
		    isfirst=false;
		    
		}
	    
	}
	
	function play() {
		$("#playcar").attr("disabled",true);
		$("#resetcar").attr("disabled",false);
		
		var point = points[index];
		if(index > 0) {
			rightmap.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "0185da", strokeWeight: 5, strokeOpacity: 0.7}));
		}
		car.setPosition(point);
		index++;
		
		if(index < points.length) {
			timer = window.setTimeout("play(" + index + ")", 200);
		} else {
			$("#playcar").attr("disabled",true);
			rightmap.panTo(point);
		}
	}
	
	function reset() {
		$("#playcar").attr("disabled",false);
		
		if(timer) {
			window.clearTimeout(timer);
		}
		index = 0;
		car.setPosition(points[0]);
		rightmap.panTo(firstpoint);
	}
	
	function distance(){
		var myDis = new BMapLib.DistanceTool(rightmap);
		myDis.open();
	} 
	
	$(document).ready(function(){
	
		$("#tab2click").click(function(){
			initialize();
	    });
	    
	    $(document).on("mouseover",".points_click",function(){
	    	$(".points_click").removeClass("active");
	    	$(this).addClass("active");
	    	if(null!=rightmap){
	    		if(null!=vectorMarker){
	    			vectorMarker.remove();
	    		}
	    		var this_point=new BMap.Point($(this).attr("data-lng"), $(this).attr("data-lat"));
	    		vectorMarker = new BMap.Marker(this_point, {
				  // 指定Marker的icon属性为Symbol
				  icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
				    scale: 1,//图标缩放大小
				    fillColor: "orange",//填充颜色
				    fillOpacity: 1//填充透明度
				  })
				});
				
				var opts = {
				  width : 200,     // 信息窗口宽度
				  height: 120,     // 信息窗口高度
				  title : "<b>轨迹详情</b>",  // 信息窗口标题
				  offset : new BMap.Size(0, -25)
				}
				var sContent="";
				sContent+="经度："+$(this).attr("data-lng")+"<br/>";
				sContent+="纬度："+$(this).attr("data-lat")+"<br/>";
				sContent+="定位时间："+$(this).attr("data-locDate")+"<br/>";
				sContent+="类型："+$(this).attr("data-loctype")+"<br/>";
				sContent+="精度："+$(this).attr("data-radius")+"<br/>";
				var infoWindow = new BMap.InfoWindow(sContent, opts);  // 创建信息窗口对象 
				rightmap.openInfoWindow(infoWindow,this_point); //开启信息窗口

				rightmap.addOverlay(vectorMarker);
	    	}
	    });
	    
	});
	</#if>
	$(document).ready(function(){
		$("img").click(function(){
			$('#imgurl').attr("src",$(this).attr('data-img'));
			$('#dialog_modifyCash').modal();
		});
		
		$(".close").click(function(){
			$('#dialog_modifyCash').modal("hide");
		});
	});
	
	function showClientMaker(lng,lat){
	    	var point=new BMap.Point(lng,lat);
	    	map = new BMap.Map("allmap");  
	    	map.centerAndZoom(point, 14);
	    	map.enableScrollWheelZoom();
	    	var marker = new BMap.Marker(point);  // 创建标注
	    	map.addOverlay(marker);
	    	
	    	map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT, mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
	        
	        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，仅包含平移和缩放按钮
	        
	        var ctrl = new BMapLib.TrafficControl({
	           showPanel: false //是否显示路况提示面板
	        });
	        map.addControl(ctrl);
	        ctrl.setAnchor(BMAP_ANCHOR_TOP_LEFT);
	    }
	
	
	 function getDrivers(lng,lat){
	    	var distance=$("#distance").val();
	    	$.get('${ctx}/driver/errandListDrivers',{'lng':lng,'lat':lat,'distance':distance},function(data){
	    		if(data && data.length>0){
	    			$("#paidanDrivers").html(data);
	    			$(data).each(function(i,driver){
	    			var type = "-"+driver.detailedJobType;
	    			if(type.indexOf(orderTypeId)>0){
	    				var detailStatus='';
	    				if(!driver.workCar){
	    					detailStatus='kongxian';
	    				}else{
	    					detailStatus='workcar';
	    				}
	    				var htm='<div id="driver_marker_'+driver.id+'" class="sj-mark driver_marker_class" style="position:absolute;z-index:9;">'+
	    							'<div class="sj-mark-ma sjcolor-'+detailStatus+'"><span>'+driver.realname+'</span></div>'+
	    							'<div class="sj-mark-rk rkcolor-'+detailStatus+'"></div>'+
	    					    '</div>';
	    				if(driver.workCar){
	    					htm='<div id="driver_marker_'+driver.id+'" class="driver_workcar_marker_class" data-z-index="9998" style="position:absolute;z-index:9998;width:110px;">'+
	    				        	'<div class="em-'+detailStatus+'-l"></div>'+
	    				    		'<div class="em-'+detailStatus+'-con">'+driver.realname+'</div>'+
	    				            '<div class="em-'+detailStatus+'-r"></div>'+
	    				        '</div>';
	    				}
	    			    var driverpoint = new BMap.Point(driver.longitude,driver.latitude);
	    				var drivermarker = new BMapLib.RichMarker(htm, driverpoint, {"anchor": new BMap.Size(-62, -40), "enableDragging": true});
	    				drivermarker.driverid=driver.id;
	    				drivermarker.driverstatus=driver.status;
	    				map.addOverlay(drivermarker);
	    				$("#paidanDrivers").append("<div class='modal-sj-bd' style='display:none;'><button type='button' class='paigeita' data-id='"+driver.id+"'>派给</button><span>"+driver.realname+"</span><span>"+driver.phone+"</span><span>"+driver.distanceStr+"</span></div>");
	    			}});
	    			$(".paigeita").each(function(index,element){
	            		$(element).parent().fadeIn((index+1)*300);
	            	});
	    		}else{
	    			$("#paidanDrivers").html(distance+"公里范围内暂无推荐服务人员，您可以扩大范围看看。");
	    		}
	    	});
	    }
    function changeCompanyMoney(){
			var driverMoney=$("#driverMoney").val();
			var wxMoney=$("#wxMoney").val();
			
			if(null!=driverMoney){
				if($("#driverPlusMinus").val()==1){
					driverMoney=Number(driverMoney)*(-1);
				}
				driverMoney=driverMoney*(-1);
			}
			
			var companyMoney=driverMoney;
			
			if(null!=wxMoney){
				if($("#wxPlusMinus").val()==1){
					wxMoney=Number(wxMoney)*(-1);
				}
				wxMoney=wxMoney*(-1);
				companyMoney+=wxMoney;
			}
			
			if(companyMoney>0){
				$("#companyMoney").html("+"+companyMoney);
			}
			else{
				$("#companyMoney").html("<font color='red'>"+companyMoney+"</font>");
			}
		}
	    
	$(document).ready(function(){
		$("img").click(function(){
			$('#imgurl').attr("src",$(this).attr('data-img'));
			$('#dialog_modifyCash').modal();
		});
		//修改订单金额开始
	    $("#modifyCash").click(function(){
	    	$('#dialog_updateRealMoney').modal();
	    });
	     //余额  增加/减少
	    $("#driver_virtual_plusminus").click(function(){
	    	if($(this).find("span").hasClass("glyphicon-plus")){
	    		$(this).find("span").removeClass("glyphicon-plus").addClass("glyphicon-minus");
	    		$("#driverPlusMinus").val(1);
	    	}
	    	else{
	    		$(this).find("span").removeClass("glyphicon-minus").addClass("glyphicon-plus");
	    		$("#driverPlusMinus").val(0);
	    	}
	    	changeCompanyMoney();
	    });
	    $("#member_virtual_plusminus").click(function(){
	    	if($(this).find("span").hasClass("glyphicon-plus")){
	    		$(this).find("span").removeClass("glyphicon-plus").addClass("glyphicon-minus");
	    		$("#memberPlusMinus").val(1);
	    	}
	    	else{
	    		$(this).find("span").removeClass("glyphicon-minus").addClass("glyphicon-plus");
	    		$("#memberPlusMinus").val(0);
	    	}
	    });
	    //金额改变
	    $("#driverMoney").change(function(){
	    	changeCompanyMoney();
	    });
	    $("#wxMoney").change(function(){
	    	changeCompanyMoney();
	    });
	    
	    $("#close_modal_updateRealMoney").click(function(){
			$('#dialog_updateRealMoney').modal("hide");
		});
		
		$("#ok_modal_updateRealMoney").click(function(){
			var reg=/^\+?[0-9][0-9]*(\.\d{1,2})?$/
			
			var message="";
			
		    //优惠券
		    if($("#couponMoney").length>0){
		    	 if(!reg.test($("#couponMoney").val())){
			       $.scojs_message('无效的优惠券金额', $.scojs_message.TYPE_ERROR);
			       return;
			    }
			    message+="优惠券："+$("#couponMoney").val()+"元，";
		    }
				    
		    //现金
		    if($("#cashMoney").length>0){
		    	 if(!reg.test($("#cashMoney").val())){
			       $.scojs_message('无效的现金金额', $.scojs_message.TYPE_ERROR);
			       return;
			    }
			    message+="现金："+$("#cashMoney").val()+"元，";
		    }
				    
		    //签单
		    if($("#signMoney").length>0){
		    	 if(!reg.test($("#signMoney").val())){
			       $.scojs_message('无效的签单金额', $.scojs_message.TYPE_ERROR);
			       return;
			    }
			    message+="签单："+$("#signMoney").val()+"元，";
		    }
				    
		    //余额
		    if($("#balanceMoney").length>0){
		    	 if(!reg.test($("#balanceMoney").val())){
			       $.scojs_message('无效的余额金额', $.scojs_message.TYPE_ERROR);
			       return;
			    }
			    message+="余额："+$("#balanceMoney").val()+"元，";
		    }
				    
		    if(!reg.test($("#driverMoney").val())){
		       $.scojs_message('无效的服务人员金额', $.scojs_message.TYPE_ERROR);
		       return;
		    }
		    
			if(!reg.test($("#memberMoney").val())){
		       $.scojs_message('无效的客户金额', $.scojs_message.TYPE_ERROR);
		       return;
		    }
		    
			if($("#dialog_modifyCash_content").val()==""){
				$.scojs_message('请填写修改原因', $.scojs_message.TYPE_ERROR);
				return false;
			}
			
			if($("#driverPlusMinus").val()==0){
				message+="服务人员余额将增加"+$("#driverMoney").val()+"元，";
			}
			else{
				message+="服务人员余额将减少"+$("#driverMoney").val()+"元，";
			}
			if($("#memberPlusMinus").val()==0){
				message+="客户余额将增加"+$("#memberMoney").val()+"元。";
			}
			else{
				message+="客户余额将减少"+$("#memberMoney").val()+"元。";
			}
					
			var confirm = $.scojs_confirm({
		        content: "确认要修改订单金额吗？"+message,
		        action:function(){
		        	$("#dialog_updateRealMoney").attr("disabled",true);
		        	$.post('${ctx}/errand/updateRealMoney',$("#modify_form").serialize(),function(data){
			            if(data.success){
			                $.scojs_message('订单金额修改成功', $.scojs_message.TYPE_OK);
			                setTimeout(function(){
			    				window.location.reload(true);
			    			},1000);
			            } else {
			            	$("#ok_modal_updateRealMoney").attr("disabled",false);
			                $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
			            }
				    },'json');
		        }
	        });
	        confirm.show();
					
		});
	    
	    
	  //修改订单金额结束  
	  
	  
		$(".close").click(function(){
			$('#dialog_modifyCash').modal("hide");
		});
		
		//跑腿订单派单
	 	var startLng;
	    var startLat;
	    var clientName;
	    var clientPhone;
	    var fromPlace;
	    $(document).on("click",".errand_paidan",function(){
	    	startLng=$(this).attr("startLng");
	    	startLat=$(this).attr("startLat");
	    	clientName=$(this).attr("passengerName");
	    	clientPhone=$(this).attr("passengerPhone");
	    	fromPlace=$(this).attr("fromPlace");
	    	orderTypeId=$(this).attr("orderTypeId");
			$("#paidanOrderId").val($(this).attr("orderId"));
			$("#paidanClientName").html(clientName);
			$("#paidanClientPhone").html(clientPhone);
			$("#paidanFromPlace").html(fromPlace);
			$("#dialog_paidan").modal();
		});
	    
	    $('#dialog_paidan').on('shown.bs.modal', function () {
	    	$("#paidanOrderLng").val(startLng);
			$("#paidanOrderLat").val(startLat);
			
			showClientMaker(startLng,startLat);
			getDrivers(startLng,startLat);
			$("#paidanClientName").html(clientName);
			$("#paidanClientPhone").html(clientPhone);
			$("#paidanFromPlace").html(fromPlace);
		});
	    
	    
	    $('#distance').change(function(){
			showClientMaker($("#paidanOrderLng").val(),$("#paidanOrderLat").val());
			getDrivers($("#paidanOrderLng").val(),$("#paidanOrderLat").val());
		});
	    $(document).on("click",".paigeita",function(){
			var driverId=$(this).attr("data-id");
			if(window.confirm('确认要派单给该服务人员吗？')){
				$.post('${ctx}/errand/paidan',{'driverId':driverId,'orderId':$("#paidanOrderId").val()},function(data){
					if(data.success){
						$.scojs_message("派单成功", $.scojs_message.TYPE_OK);
						$("#dialog_paidan").modal("hide");
						initdata(false);
					}
					else{
						$.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
					}
				});
			}
		});
	});
</script>
</@override>
<@extends name="../layout.ftl"/>
